<template>
	<view class="page">
		<view class="nav_bar" :style="`background-color: rgba(255, 255, 255, ${trans});`">
			<uni-nav-bar :color="color" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="back"></uni-nav-bar>
		</view>
		
		<view class="header">
			
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in images_photos" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			
			<view class="swiper-dot flex_center">
				<view class="swiper-dot-flex-box">
					<scroll-view scroll-x="true">
						<view class="swiper-dot-list flex_center">
							<view class="item" v-for="(item,index) in images_photos" :key="index"
							:id="index == current ? 'select' : ''" @click="current = index">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
		</view>
	
		<view class="user" v-if="user.id">
			<view class="user_info flex_r_between">
				<view class="left flex_center">
					<view class="avatar">
						<image :src="user.avatar" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="nickname flex_center">
							<text class="hidden">{{ user.nickname || '' }}</text>
							<image v-if="user.auth_status == 2"
								:src="$util.prefix('public/lf_owner_icon_v10_tech.png')"
								@click="$util.previewImage([user.certificate])"></image>
						</view>
						<view class="copy flex_center">
							<text>ID {{ user.user_id || '' }}</text>
							<image :src="$util.prefix('public/copy.png')" @click="$util.onCopy(user.id)"
								mode="aspectFill">
						</view>
					</view>
				</view>
			</view>
		
			<view class="address flex_center">
				<view class="item flex_center">
					<image :src="$util.prefix(`public/sex_${user.gender}_no_bg.png`)" mode=""></image>
					<text>{{ user.age || 18 }}岁</text>
				</view>
			</view>
		
			<view class="tags flex_center">
				<view class="item flex_r_around" v-for="(item,index) in tags" :key="index">
					<text>{{ item || '' }}</text>
				</view>
			</view>
		
			<view class="sign">
				{{ user.sign || 'Ta什么也没有留下~' }}
			</view>
		</view>
		
		<view class="btn flex_r_around" v-if="user.status == 1">
			<button class="accept" @click="beforeAccept">驳回</button>
			<button class="agree" @click="onAgree">通过</button>
		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>拒绝原因</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="check_content"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onAccept">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				images_photos: [],
				
				trans: 0,
				color: '#FFF',
				
				id: 0,
				
				user: {},
				tags: [],
				
				show: false,
				check_content: '',
			}
		},
		methods: {
			getUser() {
				this.$get('/store.store/getShareDetail', {
					id: this.id,
				}, true, (res) => {
					setTimeout(() => {
						this.$util.back();
					}, 1500)
				}).then(res => {
					this.user = res.data;
					this.images_photos = this.user.images.split(',');
					this.tags = this.user.tags.split(',');
				})
			},
			
			change(e) {
				this.current = e.detail.current;
			},
			
			back(){
				this.$util.back();
			},
			
			onAgree(){
				this.$post('/store.store/setShareStatus',{
					status: 2,
					id: this.user.id
				}).then(res=>{
					this.getUser();
					this.$util.msg(res.msg);
				});
			},
			
			beforeAccept(item) {
				this.show = true;
			},
			
			onAccept() {
				this.$post('/store.store/setShareStatus', {
					status: 3,
					id: this.user.id,
					check_content: this.check_content
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg);
					this.getUser();
				})
			},
		},
		
		onLoad(option) {
			this.id = option.id;
			this.getUser();
		},
		
		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
				if (e.scrollTop <= 100) {
					this.color = '#FFF';
				} else {
					this.color = '#999';
				}
			} else {
				this.trans = 1;
				this.color = '#333';
			}
		},
	}
</script>

<style lang="less" scoped>
	.header {
		height: calc(340rpx + var(--paging-head-top));
		overflow: hidden;
		position: relative;
		
		.swiper-box {
			width: 100vw;
			height: calc(340rpx + var(--paging-head-top));
		
			swiper-item {
				width: 100vw;
				height: calc(340rpx + var(--paging-head-top));
		
				image {
					width: 100vw;
					height: calc(340rpx + var(--paging-head-top));
				}
			}
		}
	
		.swiper-dot {
			position: absolute;
			left: 32rpx;
			bottom: 32rpx;
			width: calc(100vw - 64rpx);
			align-items: flex-end;
	
			scroll-view {
				height: 140rpx;
			}
			
			.swiper-dot-flex-box {
				overflow: hidden;
				height: 140rpx;
				flex: 1;
			}
			
			#select {
				image {
					border: 4rpx solid #FD2A53;
				}
			}
			
			.swiper-dot-list {
				height: 140rpx;
				align-items: flex-end;
			}
			
			.item {
				margin-right: 16rpx;
				position: relative;
				
				.swiper-dot-icon {
					position: absolute;
					right: -16rpx;
					top: -16rpx;
				}
				
				image {
					width: 96rpx;
					height: 96rpx;
					border: 4rpx solid transparent;
					border-radius: 16rpx;
				}
			}
		
		}
	
	}

	.user {
		overflow: hidden;
		padding: 48rpx 32rpx;
		background: #FFF;
	
		.user_info {
			align-items: flex-start;
			overflow: hidden;
	
			.left {
				overflow: hidden;
				margin-right: 32rpx;
				flex: 1;
	
				.avatar {
					width: 128rpx;
					height: 128rpx;
					border-radius: 64rpx;
					overflow: hidden;
					margin-right: 24rpx;
	
					image {
						width: 128rpx;
						height: 128rpx;
					}
				}
	
				.text {
					flex: 1;
					overflow: hidden;
	
					.nickname {
						flex: 1;
						overflow: hidden;
	
						text {
							font-weight: 600;
							font-size: 40rpx;
							color: #131313;
							font-style: normal;
							max-width: 260rpx;
						}
	
						image {
							width: 36rpx;
							height: 36rpx;
							margin-left: 8rpx;
						}
					}
	
					.copy {
						margin-top: 20rpx;
	
						text {
							font-size: 24rpx;
							color: #666666;
							line-height: 40rpx;
						}
	
						image {
							width: 20rpx;
							height: 20rpx;
							margin-left: 12rpx;
						}
					}
				}
			}
		}
	
		.address {
			margin: 24rpx 0 24rpx;
	
			.item {
				margin-right: 16rpx;
				padding: 6rpx 10rpx;
				background: rgba(104, 104, 104, 0.06);
				border-radius: 8rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				backdrop-filter: blur(10px);
	
				image {
					margin-right: 10rpx;
					width: 24rpx;
					height: 24rpx;
				}
	
				text {
					font-size: 24rpx;
					color: #666666;
				}
			}
	
			.fans {
				margin-right: 16rpx;
	
				view {
					font-weight: 600;
					font-size: 32rpx;
					color: #131313;
				}
	
				text {
					font-size: 28rpx;
					color: #131313;
				}
			}
		}
	
		.sign {
			font-size: 24rpx;
			color: #131313;
			line-height: 32rpx;
			margin-top: 24rpx;
		}
	
		.tags {
			flex-wrap: wrap;
	
			.item {
				padding: 0 32rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				border: 2rpx solid #EEEEEE;
				margin: 6rpx;
	
				text {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	
	}

	.btn {
		margin-top: 30rpx;
		
		button {
			width: 296rpx;
			height: 96rpx;
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
		}
		
		.agree {
			background: #1FC129;
		}
		
		.accept {
			background: #FD2A53;
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;
	
		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}
	
		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;
	
			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	
		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;
	
			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	
	}

</style>
